<template>
  <div class="detail-container">
    <div class="card">
      <!-- 新增：返回按钮 -->
      <div class="back-btn-container">
        <el-button type="default" icon="ArrowLeft" @click="handleBack">
          返回
        </el-button>
      </div>
      <!-- 1. 基本信息区域（位置不变） -->
      <div class="section">
        <h3 class="section-title">基本信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">单据编号</span>
            <span class="value">{{ billNo }}</span>
          </div>
          <div class="info-item">
            <span class="label">老人姓名</span>
            <span class="value">{{ basicForm.elderName }}</span>
          </div>
          <div class="info-item">
            <span class="label">老人身份证号</span>
            <span class="value">{{ basicForm.idCard }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系方式</span>
            <span class="value">{{ basicForm.phone }}</span>
          </div>
          <div class="info-item">
            <span class="label">护理等级</span>
            <span class="value">{{ basicForm.nursingLevel }}</span>
          </div>
          <div class="info-item">
            <span class="label">入住床位</span>
            <span class="value">{{ basicForm.bed }}</span>
          </div>
          <div class="info-item">
            <span class="label">护理员</span>
            <span class="value">{{ basicForm.nurse }}</span>
          </div>
        </div>
      </div>

      <!-- 2. 申请信息区域（移到操作记录前面，实现位置互换） -->
      <div class="section">
        <h3 class="section-title">申请信息</h3>
        <div class="apply-grid">
          <div class="apply-item">
            <span class="label">陪同人</span>
            <span class="value">{{ applyForm.accompanyName }}</span>
          </div>
          <!-- 请假周期：添加自定义class，确保一行显示 -->
          <div class="apply-item leave-period-item">
            <span class="label">请假周期</span>
            <span class="value">{{
              (applyForm.leavePeriod || []).join(" - ")
            }}</span>
          </div>
          <div class="apply-item">
            <span class="label">请假天数</span>
            <span class="value">{{ applyForm.leaveDays }}天</span>
          </div>
          <div class="apply-item">
            <span class="label">请假原因</span>
            <span class="value">{{ applyForm.leaveReason }}</span>
          </div>
          <div class="apply-item">
            <span class="label">申请人</span>
            <span class="value">{{ submitData.nurseNickName }}</span>
          </div>
          <div class="apply-item">
            <span class="label">申请时间</span>
            <span class="value">{{ submitData.createTime }}</span>
          </div>
        </div>
      </div>

      <!-- 3. 操作记录区域（移到申请信息后面，实现位置互换） -->
      <div class="section">
        <h3 class="section-title">操作记录</h3>
        <div class="record-list">
          <!-- 发起申请记录 -->
          <div class="record-item">
            <div class="record-type">发起申请-申请请假</div>
            <div class="record-content">
              <span class="operator">{{ submitData.nurseNickName }}</span>
              <span class="time">{{ submitData.createTime }}</span>
            </div>
          </div>
          <!-- 审批记录 -->
          <div class="record-item">
            <div class="record-type">
              护理组主管审批-申请审批
              <span
                :class="[
                  'status',
                  {
                    pass: auditStatus === 1,
                    reject: auditStatus === 2,
                    return: auditStatus === 3,
                  },
                ]"
              >
                {{ auditStatusText }}
              </span>
            </div>
            <div class="record-content">
              <span class="operator">{{ approverName }}</span>
              <span class="time">{{
                accraditationRecord.finishTime || "未审批"
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 3. 新增：销假记录区域（仅“已返回”状态显示） -->
      <div class="section" v-if="isReturned">
        <h3 class="section-title">销假记录</h3>
        <div class="info-grid">
          <!-- 状态（固定“已返回”） -->
          <div class="info-item">
            <span class="label">状态</span>
            <span class="value">
              <el-tag type="success">已返回</el-tag>
            </span>
          </div>
          <!-- 实际返回时间 -->
          <div class="info-item">
            <span class="label">实际返回时间</span>
            <span class="value">{{ leaveDetail.actualEndTime || "无" }}</span>
          </div>
          <!-- 实际请假天数 -->
          <div class="info-item">
            <span class="label">实际请假天数</span>
            <span class="value">{{
              leaveDetail.actualLeaveDays
                ? `${leaveDetail.actualLeaveDays}天`
                : "无"
            }}</span>
          </div>
          <!-- 备注 -->
          <div class="info-item">
            <span class="label">备注</span>
            <span class="value">{{
              leaveDetail.actualReturnRemark || "无"
            }}</span>
          </div>
          <!-- 销假人（从 submitData 中获取） -->
          <div class="info-item">
            <span class="label">销假人</span>
            <span class="value">{{ submitData.nurseNickName || "未知" }}</span>
          </div>
          <!-- 销假时间（用实际返回时间，无则用申请时间） -->
          <div class="info-item">
            <span class="label">销假时间</span>
            <span class="value">{{
              leaveDetail.actualEndTime || submitData.createTime || "无"
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter(); // 新增：创建路由实例
// 接收路由参数
const route = useRoute();
const leaveId = ref("");
const billNo = ref("");
const basicForm = ref({});
const applyForm = ref({});
const submitData = ref({});
const accraditationRecord = ref({});
const approverName = ref("未知审批人");
const leaveDetail = ref({}); // 新增：接收销假数据
// 2. 计算属性：判断是否“已返回”状态（控制销假记录显示）
const isReturned = computed(() => {
  // 条件：leaveDetail 中状态为“已返回”，或存在实际返回时间（双重保障）
  return (
    leaveDetail.value.leaveStatus === "已返回" ||
    (leaveDetail.value.actualEndTime &&
      leaveDetail.value.actualEndTime.trim() !== "")
  );
});
// 审批状态计算属性（不变）
const auditStatus = computed(() => accraditationRecord.value.auditStatus);
const auditStatusText = computed(() => {
  switch (auditStatus.value) {
    case 1:
      return "通过";
    case 2:
      return "拒绝";
    case 3:
      return "驳回";
    default:
      return "待审批";
  }
});

// 解析路由参数（不变）
onMounted(() => {
  leaveId.value = route.query.leaveId || "";
  billNo.value = route.query.billNo || "";
  approverName.value = route.query.approverName || "未知审批人";
  basicForm.value = route.query.basicForm
    ? JSON.parse(route.query.basicForm)
    : {};
  applyForm.value = route.query.applyForm
    ? JSON.parse(route.query.applyForm)
    : {};
  submitData.value = route.query.submitData
    ? JSON.parse(route.query.submitData)
    : {};
  accraditationRecord.value = route.query.accraditationRecord
    ? JSON.parse(route.query.accraditationRecord)
    : {};
  leaveDetail.value = route.query.leaveDetail
    ? JSON.parse(route.query.leaveDetail)
    : {}; // 解析销假数据
  // 调试日志（可选保留）
  console.log("审批记录:", accraditationRecord.value);
  console.log("请假周期数据:", applyForm.value.leavePeriod);
});
// 新增：返回按钮点击事件
const handleBack = () => {
  // 跳回列表页（根据实际路由配置调整路径）
  router.push({ path: "/zaizhu/qingjia/request" });
};
</script>

<style scoped>
/* 原有样式不变，新增/调整以下样式 */
/* 1. 请假周期单独样式：占满一行，防止时间换行 */
.leave-period-item {
  grid-column: 1 / -1; /* 跨列占满当前行（关键） */
  white-space: nowrap; /* 防止时间文本换行（兜底） */
}
/* 销假记录复用基本信息的网格布局（无需额外样式） */
.info-grid,
.apply-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
/* 2. 申请信息网格布局：微调列间距，适配跨列样式 */
.apply-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

/* 原有样式保留 */
.status.reject {
  background-color: #fef0f0;
  color: #f56c6c;
}
.status.return {
  background-color: #fff7e6;
  color: #e6a23c;
}
.detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 64px);
}
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  padding: 24px;
}
.section {
  margin-bottom: 24px;
}
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-left: 8px;
  border-left: 3px solid #409eff;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.info-item,
.apply-item {
  display: flex;
  align-items: center;
}
.label {
  width: 120px;
  color: #666;
  font-size: 14px;
}
.value {
  color: #333;
  font-size: 14px;
  flex: 1;
}
.record-list {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
}
.record-item {
  padding: 16px;
  border-bottom: 1px solid #ebeef5;
}
.record-item:last-child {
  border-bottom: none;
}
.record-type {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}
.status {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}
.pass {
  background-color: #f0f9eb;
  color: #67c23a;
}
.record-content {
  font-size: 14px;
  color: #666;
  display: flex;
  gap: 24px;
}
</style>
